<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>谈心谈话打分</title>

		<link href="../bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.class_div_scroe {
				height: 100vh;
			}
			
			.class_div_header {
				height: 15vh;
				background-image: url(../img/header.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
			
			.class_div_infobox {
				margin-top: 10px;
				height: 82vh;
			}
			/*成员信息*/
			
			.div_class_userinfo {
				width: 100%;
				background: rgb(240, 242, 245, 1);
			}
			#user_avater{
				border-radius:50%;
				height:200px;
				width: 200px;
			}
			/*成员打分*/
			
			#class_div_grade_title {
				color: #000000;
				font-size: 1.7em;
				font-weight: bold;
				margin: 20px;
			}
			
			.class_div_grade {
				border-top: 2px solid #C7254E;
				padding-top: 20px;
				background: rgb(240, 242, 245, 1);
				height: 250px;
			}
			
			#class_ol_score li {
				padding: 3px;
				font-size: 1.2em;
			}
			
			#id_p_grade_title {
				color: #000000;
				text-align: center;
				font-size: 1.5em;
			}
			
			.class_input_grade {
				color: #ff5c23;
				font-size: 3em;
				text-align: center;
				width: 100px;
				height: 100px;
			}
			.class_btn_next {
				margin-top: 30%;
				width: 100%;
				height: 50px;
			}
			.class_p_alertText{
				color:red;
				font-weight: bold;
				width: 100%;
				font-size:15px;
			}
			.raterinfo{
				font-weight: bold;
				font-size:15px;
			}
			
			.class_div_logout{
				position: fixed;
				bottom:50px;
				right: 50px;
			}
			.class_div_logout button{
				width: 80px;
				height:40px;
			}
			
		</style>
	</head>

	<body>
		<div class="class_div_scroe">
			<div class="class_div_header">
			</div>
			<div class="row class_div_container" style="margin: 0;padding: 0;">
				<div class="col-xs-10 col-xs-offset-1">
					<div class="class_div_infobox">
						<div class="div_class_userinfo">
							<div style="text-align: center;padding:40px;">
								<img id="user_avater" />
							</div>
							<div style="text-align: center;padding:20px;">
								<p id="user_num"></p>
							</div>
						</div>
						<div class="class_div_grade">
							<span id="class_div_grade_title">评分细则：</span>
							<div class="row" style="margin:20px">
								<div class="col-md-6">
									<ol id="class_ol_score"></ol>
								</div>
								<div class="col-md-2" id="alertText"></div>
								<div class="col-md-2">
									<p id="id_p_grade_title"></p>
									
									<p style="text-align: center;">
										<input class="class_input_grade" id="curret_score" type="tel"/>
									</p>
								</div>
								<div class="col-md-2" style="text-align: center;">
									<div style="text-algin:left;" id="raterinfo">
									</div>
									<button type="button" class="btn btn-info class_btn_next" id="GetNextButton" onclick="Socre()">下一个</button>
								</div>
							</div>
						</div>
					</div>
					<div class="class_div_logout">
						<a href="DaFenPage.html"><button type="button" class="btn btn-info">返回首页</button></a>
					</div>
				</div>
				<script src="../js/jquery-1.12.4/jquery.min.js"></script>
				<script src="../bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
				<script src="../js/jquery-2.1.4/jquery.min.js"></script>
				<script type="text/javascript" src="../layui/layui.js"></script>
				
				<script type="text/javascript" src="../js/common.js" ></script>
				
				<script type="text/javascript" src="../js/ip.js"></script>
				<script type="text/javascript">
					var currStageId;
					var currCandidateSort;
					var currId;
					var scoreInfoId = 1;
					var rater;
					var isSameSchool;
					(function() {
						getCurr();
						rater = JSON.parse(localStorage.getItem('user'));
						let raterinfo = document.getElementById("raterinfo");
						raterinfo.innerHTML = "<p class='raterinfo' >姓名："+ rater.name + "</p><p class='raterinfo'>学校:"+rater.school + "</p>";
					})();

					function showStageText(currStageId) {
						let text = document.getElementById('id_p_grade_title');
						let resultList = document.getElementById('class_ol_score');
						let resultTitle = document.getElementById('class_div_grade_title');
						if(currStageId == 1) {
							text.innerText = '理论宣讲打分';
							resultTitle.innerText = '评分细则：（理论宣讲）';
							resultList.innerHTML = "<li>主题鲜明，观点新颖。（30 分）</li>" +
										           "<li>思想丰富，声情并茂。（30 分）</li>" +
												   "<li>逻辑严谨，语言流畅。（30 分）</li>" +
										           "<li>仪态大方，举止得体。（10 分）</li>";
						} else if(currStageId == 2) {
							text.innerText = '谈心谈话打分';
							resultTitle.innerText = '评分细则：（谈心谈话）';
							resultList.innerHTML = "<li>准确把握大学生思想政治教育理论及政策。（20 分）</li>" +
										           "<li>善于抓住学生特征。（30 分）</li>" +
												   "<li>对学生的教育引导效果明显。（30 分）</li>" +
										           "<li>沟通技巧娴熟。（20 分）</li>";
						}
					}

					//获取阶段号和当前打分序号
					function getCurr() {
						let postaddress = ip + '/grade/curr/get';
						$.ajax({
							//几个参数需要注意一下
							type: "post", //方法类型
							dataType: "json", //预期服务器返回的数据类型
							url: postaddress, //url 
							success: function(result) {
								if(result.code == 0) {
									if(result.data.currStageId>2){
										alert('打分结束');
										window.location.href = 'DaFenPage.html';
									}
									if(result.data.currStageId===1){
										alert('打分还未开始');
										window.location.href = 'DaFenPage.html';
									}
									currStageId = 2; //阶段号
									showStageText(currStageId);
									currCandidateSort = result.data.currCandidateSort; //候选人顺序号
									getNextInfo();
								} else {
									alert("错误");
								}
							},
							error: function() {

							}
						});
					}

					//获取下一个候选人信息
					function getNextInfo() {
						let postaddress = ip + '/grade/next';
						let info = new Object();
						info.scoreInfoId = 1;
						info.sort = currCandidateSort;
						info.stageId = currStageId;
						$.ajax({
							//几个参数需要注意一下
							type: "POST", //方法类型
							dataType: "json", //预期服务器返回的数据类型
							contentType: "application/json;charset=utf-8",
							url: postaddress, //url
							data: JSON.stringify(info),
							success: function(result) {
								
								if(result.code == 0){
									if(result.data == '') {
										window.location.href = 'TanXinUserScroeList.html';
									} else {
										isInput(result.data.school);
										currId = result.data.id;
										getUserAvater(currId); 
										getUserNum(result.data.number,result.data.fraction);
									}
								}
							},
							error: function() {
								alert("错误");
							}
						});
					}

					function isInput(school) {
						//console.log(school);
						let raterSchool = school;
						let candidate = JSON.parse(localStorage.getItem('user'));
						//console.log(candidate.school);
						let alertText = document.getElementById('alertText');
						if(raterSchool === candidate.school) {
							alertText.innerHTML = "提示：<p class='class_p_alertText'>评分人学校和候选人学校相同，禁止输入，请点击下一个</p>"
							isSameSchool = true;
							$('#curret_score').attr('disabled', true);
						}else{
							alertText.innerHTML = "<p></p>";
							isSameSchool = false;
							$('#curret_score').attr('disabled', false);
						}
					}
					
					function getUserAvater(id){
						let userAavter = document.getElementById('user_avater');
						userAavter.src = ip + '/grade/getimg?id=' + id;
					}
					function getUserNum(num,fraction){
						let userNum = document.getElementById('user_num'); 
						userNum.innerText = '编号：'+num; 
						if(!fraction){
							fraction = 0;
						}
						document.getElementById('curret_score').value = fraction;
						
					}
					//打分
					function Socre() {
						let fraction = document.getElementById('curret_score').value;
						if (fraction == undefined){
							alert("您还未打分");
							return;
						}
						console.log(isSameSchool);
						if(fraction == 0 && !isSameSchool){
							let isZero = confirm('是否确定为0分?')
							if(isZero == true){
								posetScore(fraction);
							}else{
								return;
							}
						}
						if(fraction < 0 || fraction>100){
							layui.use('layer', function(){
							  var layer = layui.layer;
							  layer.msg('分数必须在0到100之间');
							});
							fraction = 0;
							return;
						}   
						posetScore(fraction);
					}
					
					function posetScore(fraction){
						let info = new Object();
						info.scoreInfoId = 1;
						info.stageId = currStageId;
						info.candidateId = currId;
						info.fraction = fraction;
						let postaddress = ip + '/grade/set';
						$.ajax({
							//几个参数需要注意一下
							type: "POST", //方法类型
							dataType: "json", //预期服务器返回的数据类型
							contentType: "application/json;charset=utf-8",
							url: postaddress, //url
							data: JSON.stringify(info),
							success: function(result) {
								currCandidateSort++;
								getNextInfo();
							},
							error: function() {
								alert(result.msg);
							}
						});
					}
				</script>
	</body>

</html>